<script setup lang="ts">
import { computed, ref } from 'vue'

const firstName = ref('John')
const lastName = ref('Doe')

// 取值的写法 只可以取值, 赋值会有提示 computed value is readonly
// const fullName = computed(() => {
//   return firstName.value + '-' + lastName.value
// })

// 只有在计算属性需要赋值时才写
// 大部分情况下用 上面的简写形式 get 的简写即可
const fullName = computed({
  get() {
    return firstName.value + '-' + lastName.value
  },
  set(value) {
    console.log(value)
    firstName.value = value.split(' ')[0]
    lastName.value = value.split(' ')[1]
  },
})
</script>

<template>
  <div id="app">
    <h2>全名:{{ fullName }}</h2>
    <button @click="fullName = 'Rose Li'">计算属性赋值</button>
  </div>
</template>

<style></style>
